一、项目打包目前了解到的next项目的打包有三种模式：
静态站点生成（SSG)
12345const nextConfig = { output:'export'};export default nextConfig;
优点:
静态站点生成（SSG）: 所有的页面内容都在构建时被预渲染，并生成静态文文件
部署： 适合部署在不支持服务端渲染的环境，比如github Page或者其他静态托管站点托管服务
缺点：
不支持动态路由。 所有的页面都在构建时生成， 无法使用SSR渲染动态数据，
不能使用API路由，也就是说不能使用到编写后端接口的功能，next全栈的优势就没了
可能不是传统意义上的SSR（在页面初次渲染时，能根据不同的条件会返回不同的HTML）
生成的目录结构：
二、混合模式
12345const nextConfig = { output:'standalone'};export default nextConfig;
优点：
独立部署: 使用 output: &...
基于Github Actions 和 docker 的前端项目CI/CD项目背景 最近在写一个管理系统项目的时候出现了一些比较麻烦的问题，由于进度比较赶，项目虽然上线了，但是还需要继续开发，这就涉及到频繁的构建和部署。
首先讲一下没使用CI/CD 之前的部署方式:
首先使用pnpm build，拿到项目的打包产物.output文件夹
将.output文件夹压缩，并通过服务器可视化工具宝塔，将压缩包上传到指定文件夹下
第一次部署时使用pm2命令pm2 start ./.output/server/index.mjs -name 'xxx'启动项目
以后的部署都直接使用 pm2 restart [name] 即可
后面重构的时候了解到pm2还有文件监听功能, 启动命令就换成了pm2 start ./.output/server/index.mjs -name 'xxx' --watch, 这样就不用每次都打开终端重启pm2 进程了
但是这种部署方式实在繁琐，我需要通过：1. 手动打包项目， 2. 将打包产物压...
样式方案传统的CSS书写存在许多弊端，如下：
开发体验欠佳，样式不允许嵌套，传统的后代选择器等等比较繁琐
样式污染问题，需要严格考虑选择器命名和权重，避免样式污染和覆盖
浏览器兼容性问题，需要手动加上-moz-、-webkit、-ms-、-o-等
打包后的代码体积问题
为了解决这些弊端，社区中诞生了不少方案，常见的有五类：
css预处理器，如scss、less、和Stylus。这些方案都有自己的一套语法，让CSS允许使用嵌套规则、变量、函数、条件判断、循环等等，大大的增强了样式的灵活性。
css modules，能够将CSS类名处理成哈希值，这样就可以避免同名的情况下的样式污染。如在vite中配置的:
1234567891011121314// index.css -> index.module.csscss: { modules: { // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义 // 其中，name 表示当前文件名，local 表示类名 generateScop...
模块化无模块化标准阶段早在模块化标准还没有诞生的时候，前端领域已经产生了一些模块化的开发手段，如文件划分、命名空间和 IIFE 私有作用域。
（1）文件划分：
文件划分方式是最原始的模块化实现，简单来说就是将应用的状态和逻辑分散到不同的文件中，然后通过 HTML 中的 script 来一一引入。
问题：
模块的变量相当于全局声明和定义，会出现命名冲突的问题
由于变量都在全局定义，我们很难知道某个变量到底属于哪个模块，造成了调试困难
无法清晰的管理模块之间的依赖关系和加载顺序，加载顺序只能通过手动调整script标签的位置实现。
（2）命名空间：
命名空间是模块化的另一种实现手段，它可以解决上述文件划分方式中全局变量定义所带来的一系列问题。通过将每个模块的生命周期指定一个所属的命名空间，达到解决变量污染的问题，具体的实现是在每个模块包裹上windown.命名空间
（3）IIFE(立即执行函数)：
相比于命名空间的模块化手段，IIFE实现的模块化安全性要更高，对于模块作用域的区分更加彻底。
我们知道，每个IIFE 即立即执行函数都会创建一个私有的作用域，在私有作用域中...
《Vue的设计与实现》——霍春阳响应系统作用与实现1234567891011121314151617181920212223const targetMap = new WeakMap();const obj = new Proxy(data, { // 监听读取操作 get(target, key) { track(target, key); return targer[key]; }; set(target, key, newVal) { target[key] = newVal; triger(targer, key); }})function track(target, key) {}function triger(target, key) {}
a. 分支切换导致的副作用冗余问题
cleanup函数
b. 遍历set时导致的无限循环问题
创建一个新的Set数据结构
c. 嵌套副作用函数导致响应式关...
硬件结构图灵机
纸带 -> 内存
读写头
控制单元
存储单元
运算单元
冯诺依曼模型
运算器
存储器
控制器
输入设备
输出设备
内存中央处理器CPU 内部还有一些组件，常见的有寄存器、控制单元和逻辑运算单元
常用的寄存器种类有：
1. 通用寄存器
1. 指令寄存器
1. 程序计数器
通用寄存器，用来存放需要进行运算的数据；
指令寄存器用来存放当前正在执行以及执行完的指令；
程序计数器用来存放下一条需要执行的指令的地址；
事件总线总线是用于 CPU 和内存以及其他设备之间的通信，总线可分为 3 种：
地址总线
数据总线
控制总线
地址总线，用于指定 CPU 将要操作的内存地址；
数据总线，用于读写内存的数据；
控制总线，用于发送和接收信号，比如中断、设备复位等信号
中断在计算机中，中断是系统用来响应硬件设备请求的一种机制，操作系统收到硬件的中断请求，会打断正在执行的进程，然后调用内核中的中断处理程序来响应请求。
操作系统收到了中断请求，会打断其他进程的运行，所以 中断请求的响应程序 也就是中断处理程序，要尽可能快的执行完，这样可以减少对正常进程运行调度地影响...
国际化方案国际化背景 国际化（Internationalization，简称 i18n）是指在软件、网站或应用开发中，使其能够适应不同国家或地区的语言、文化、时间格式、货币符号、法律规范等多样化需求的过程。通过国际化，产品可以更容易地进行本地化（Localization），即根据特定地区的需求进行适应和调整，而无需重新开发整个系统。
国际化的核心目标是设计和构建一个产品，使其能够支持多语言、多地区的使用，并且能够灵活处理各种与地域相关的差异，如文本翻译、日期格式、货币、单位、输入法等。
扩展：
本地化：本地化（Localization, L10n）的核心是将产品适配特定地区的语言、文化、习俗和法律要求，以便为目标市场提供符合当地用户期望的体验。
国际化需要解决的问题
语言翻译
静态文案（前端静态模板文案）
动态文案（服务端下发的动态数据)
样式
不同的语言文案，长度不一样，容易造成样式混乱
图片替换（带有文案的图片）
受文化习惯的影响，部分地区使用从右到左的阅读方式
文化习惯
货币单位
时间格式
准确的文字翻译，受文化风俗的影响，相同的文字可能蕴...